<!--
 * @Author: your name
 * @Date: 2020-10-22 14:10:28
 * @LastEditTime: 2021-01-13 15:07:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\sunglasses\index.vue
-->
<template>
  <div class="w1200auto">
    <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem" />
    <banner
      :bannerImg="require('~/assets/image/Product-list_03.jpg')"
      h_height="300px"
    />
    <filter-item
      :optionData="optionData"
      @checkedOptions="checkedOptions"
      class="filter-item"
    />
    <product-list
      :productData="productData"
      @loadMoreData="loadMoreData"
      class="mb50"
    />
  </div>
</template>

<script>
import ProductList from "~/components/common/ProductList";
import BreadCrumb from "~/components/common/Breadcrumb";
import Banner from "~/components/common/Banner";
import FilterItem from "~/components/common/FilterItem";
import { getUrlParam } from "~/utils/validate";
export default {
  async asyncData({ req, params, query, route }) {
    let page = await getUrlParam(route.fullPath, Object.keys(query)[0]);
    let arr = [];
    // 判断是否存在子级
    if (/\-*/i.test(page)) {
      arr = page.split("-");
    } else {
      arr.push(page);
    }

    return {
      productData: [
        {
          id: 1,
          baseUrl: require('~/assets/image/1_7.jpg'),
          imgs: [
            { url: require('~/assets/image/1_7.jpg') },
            {
              url:
                require('~/assets/image/1_1__1.jpeg'),
            },
            {
              url:
                require('~/assets/image/1_1__1_1.jpeg'),
            },
          ],
          finalPrice: "89",
          name: "FANKEN",
          price: "89",
          options: [
            {
              id: "1",
              img: require('~/assets/image/8051-1.png'),
              title: "blank",
            },
            {
              id: "2",
              img: require('~/assets/image/8051-2.png'),
              title: "gray",
            },
            {
              id: "3",
              img: require('~/assets/image/8051-3.png'),
              title: "white",
            },
          ],
        },
        {
          id: 2,
          imgs: [
            {
              url: require('~/assets/image/1_1_.jpg'),
            },
            {
              url:
                require('~/assets/image/1_1__1.jpeg'),
            },
            {
              url:
                require('~/assets/image/1_1__1_1.jpeg'),
            },
          ],
          finalPrice: "89",
          name: "FANKEN",
          price: "89",
          options: [
            {
              id: "1",
              img: require('~/assets/image/8051-1.png'),
              title: "blank",
            },
            {
              id: "2",
              img: require('~/assets/image/8051-2.png'),
              title: "gray",
            },
            {
              id: "3",
              img: require('~/assets/image/8051-3.png'),
              title: "white",
            },
          ],
        },
        {
          id: 3,
          imgs: [
            {
              url: require('~/assets/image/1_1_.jpg'),
            },
            {
              url:
                require('~/assets/image/1_1__1.jpeg'),
            },
            {
              url:
                require('~/assets/image/1_1__1_1.jpeg'),
            },
          ],
          finalPrice: "89",
          name: "FANKEN",
          price: "89",
          options: [
            {
              id: "1",
              img: require('~/assets/image/8051-1.png'),
              title: "blank",
            },
            {
              id: "2",
              img: require('~/assets/image/8051-2.png'),
              title: "gray",
            },
            {
              id: "3",
              img: require('~/assets/image/8051-3.png'),
              title: "white",
            },
          ],
        },
        {
          id: 4,
          imgs: [
            {
              url: require('~/assets/image/1_1_.jpg'),
            },
            {
              url:
                require('~/assets/image/1_1__1.jpeg'),
            },
            {
              url:
                require('~/assets/image/1_1__1_1.jpeg'),
            },
          ],
          finalPrice: "89",
          name: "FANKEN",
          price: "89",
          options: [
            {
              id: "1",
              img: require('~/assets/image/8051-1.png'),
              title: "blank",
            },
            {
              id: "2",
              img: require('~/assets/image/8051-2.png'),
              title: "gray",
            },
            {
              id: "3",
              img: require('~/assets/image/8051-3.png'),
              title: "white",
            },
          ],
        },
      ],
      optionData: [
        {
          code: "custom_color",
          label: "Color",
          options: [
            {
              id: "84",
              label: "Black",
              src: require('~/assets/image/Black.png'),
            },
            {
              id: "85",
              label: "Gray",
              src: require('~/assets/image/Gray.png'),
            },
            {
              id: "86",
              label: "Orange",
              src: require('~/assets/image/Orange.png'),
            },
          ],
        },
        {
          code: "gender",
          label: "Gender",
          options: [
            {
              label: "Men",
              src: require('~/assets/image/Men.png'),
              id: "53",
            },
            {
              id: "54",
              label: "Women",
              src: require('~/assets/image/Women.png'),
            },
          ],
        },
        {
          code: "material",
          label: "Material",
          options: [
            {
              id: "52",
              label: "Metal",
              src: require('~/assets/image/Metal.png'),
            },
          ],
        },
        {
          code: "shape",
          label: "Shape",
          options: [
            {
              id: "71",
              label: "Cat eye",
              src: require('~/assets/image/Cat eye.png'),
            },
            {
              id: "69",
              label: "Rectangle",
              src: require('~/assets/image/Rectangle.png'),
            },
            {
              id: "70",
              label: "Round",
              src: require('~/assets/image/Round.png'),
            },
          ],
        },
        {
          code: "fit",
          label: "Fit",
          options: [
            {
              id: "73",
              label: "Medium",
              src: require('~/assets/image/Medium.png'),
            },
          ],
        },
        {
          code: "feature",
          label: "Feature",
          options: [
            {
              id: "82",
              label: "Lightweight",
              src: require('~/assets/image/Lightweight.png'),
            },
          ],
        },
      ],
      breadcrumbTtem: arr || [],
    };
  },
  components: {
    ProductList,
    BreadCrumb,
    Banner,
    FilterItem,
  },
  methods: {
    /**
     *@param:
     *@description:
     *@author: Mister Wang
     *@date: 2020-12-08 15:42:55
     */
    getRouteData(url) {
      // debugger
      let start = url.indexOf("?");
      let end = url.indexOf("=");
      start = start + 1;
      let page = url.slice(start, end);
      let str = getUrlParam(url, page);
      if (/\-*/i.test(str)) {
        this.breadcrumbTtem = str.split("-");
      } else {
        this.breadcrumbTtem.push(str);
      }
    },
    checkedOptions(option) {
      console.log("option :>> ", option);
    },
    loadMoreData(curPage) {
      console.log("curPage :>> ", curPage);
    },
  },
  watch: {
    $route(to, from) {
      if (to.fullPath !== from.fullPath) {
        this.getRouteData(to.fullPath);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>